<template>
    <view class="container">
        <div style="height: 10px;"></div>
        <div class="card">
            <div class="inCard">
                <div style="height: 25rpx;"></div>
                <div class="flex">
                    <div class="title">签约时间</div>
                    <div style="width: 20%;"></div>
                    <div>{{ info.beginDate }}</div>
                </div>
                <div style="height: 25rpx;"></div>
                <div class="flex">
                    <div class="title">合同时间</div>
                    <div style="width: 20%;"></div>
                    <div>{{ info.signTime }}</div>
                </div>
                <div style="height: 25rpx;"></div>
                <div class="flex" style="align-items: end;">
                    <div class="title">到期提醒</div>
                    <div style="width: 20%;"></div>
                    <div v-show="info.notifyScope == '000'">
                        <div>暂无</div>
                    </div>
                    <div v-show="info.notifyScope == '010'">
                        <div>
                            <div style="height: 15rpx;"></div>
                            <div>到期前三天</div>
                            <div style="height: 15rpx;"></div>
                        </div>
                    </div>
                    <div v-show="info.notifyScope == '001'">
                        <div>
                            <div style="height: 15rpx;"></div>
                            <div>到期前一周</div>
                            <div style="height: 15rpx;"></div>
                        </div>
                    </div>
                    <div v-show="info.notifyScope == '100'">
                        <div>
                            <div style="height: 15rpx;"></div>
                            <div>到期前一天</div>
                            <div style="height: 15rpx;"></div>
                        </div>
                    </div>
                    <div v-show="info.notifyScope == '110'">
                        <div>
                            <div>到期前一天</div>
                            <div style="height: 15rpx;"></div>
                            <div>到期前三天</div>
                            <div style="height: 15rpx;"></div>
                        </div>
                    </div>
                    <div v-show="info.notifyScope == '111'">
                        <div>
                            <div>到期前一天</div>
                            <div style="height: 15rpx;"></div>
                            <div>到期前三天</div>
                            <div style="height: 15rpx;"></div>
                            <div>到期前一周</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 20px;"></div>
        <!-- 有机质 -->
        <div class="card">
            <div class="inCard">
                <div style="height: 25rpx;"></div>
                <div v-for="item in contractDetailList">
                    <div class="flex">
                        <div class="title">有机质</div>
                        <div style="width: 20%;"></div>
                        <div>{{ item.organicType }}</div>
                    </div>
                    <div style="height: 25rpx;"></div>
                    <div class="flex">
                        <div class="title">处理费用</div>
                        <div style="width: 20%;"></div>
                        <div>{{ item.treatmentExpense }}元/吨</div>
                    </div>
                    <div style="height: 25rpx;"></div>
                    <div class="flex">
                        <div class="title">收运费用</div>
                        <div style="width: 20%;"></div>
                        <div>{{ item.transportationExpense }}元/吨</div>
                    </div>
                    <div style="height: 25rpx;"></div>
                    <!-- <div class="sign" @click="signs" v-show="info.farmSigned==0||info.plantSigned==0">签约</div> -->
                </div>
            </div>
        </div>
        <div style="height: 25rpx;"></div>
        <div class="sign" @click="signs" v-if="info.farmSigned == 0">签约</div>
        <div class="signs" @click="dels" v-if="info.farmSigned == 1">删除</div>
        <!--  -->
        <u-overlay :show="show" @click="show = false">
            <view class="warp">
                <view class="rect" @tap.stop>
                    <view class="wrapper">
                        <view class="handCenter">
                            <canvas class="suppWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
                                @touchmove="uploadScaleMove" canvas-id="suppWriting"></canvas>
                        </view>
                        <view class="handRight">
                            <view class="handTitle">客户签名</view>
                            <view class="handBtn">
                                <view class="" @click="retDraw">
                                    <view class="delBtnIcon"><u-icon name="trash" color="#F11515" size="18"></u-icon>
                                    </view>
                                    <view class="delBtn">清除画布</view>
                                </view>
                                <button @click="subCanvas" class="subBtn">确定</button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </u-overlay>
    </view>
</template>
<script>
import { getSignContent, acceptSign,delCon } from '../api/api';
import request from '../../common/request';
export default {
    data() {
        return {
            request: request,
            base: '',
            info: {},
            contractDetailList: [],
            flagNum: '',
            filePath: '',
            //
            dpID: 0,
            canvasName: 'suppWriting',
            ctx: '',
            startX: null,
            startY: null,
            canvasWidth: 0,
            canvasHeight: 0,
            selectColor: 'black',
            lineColor: '#1A1A1A', // 颜色
            lineSize: 5, // 笔记倍数
            MyResult: {},
            upgradeContractFlag: false,
            deliveryOrderId: null,
            show: false
        }
    },
    methods: {
        signs() {
            let that = this;
            // console.log(this.info.id);
            // if (that.filePath == '') {
            uni.showToast({
                title: '签字后提交',
                icon: 'none'
            });
            that.ctx = uni.createCanvasContext("suppWriting");
            that.$nextTick(() => {
                uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
                    that.canvasWidth = rect.width;
                    that.canvasHeight = rect.height;
                    /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
                    that.setCanvasBg('#fff');
                })
                    .exec();
            });
            setTimeout(() => {
                that.show = true;
            }, 1000)
            // } else {
            // uni.showModal({
            //     title: '提示',
            //     content: '确认要接受签约吗',
            //     success: function (res) {
            //         if (res.confirm) {
            //             console.log(that.info.id, that.filePath);

            //             // return;
            //             acceptSign({
            //                 id: that.info.id,
            //                 filePath: that.filePath
            //             }).then(res => {
            //                 console.log(res.data);
            //                 if (res.data.code == 200) {
            //                     uni.showToast({
            //                         title: res.data.msg,
            //                         icon: 'success'
            //                     })
            //                     setTimeout(() => {
            //                         uni.navigateBack({ delta: 1 });
            //                         that.filePath = '';
            //                         that.retDraw();
            //                     }, 1000)
            //                 } else {
            //                     uni.showToast({
            //                         title: res.data.msg,
            //                         icon: 'none'
            //                     })
            //                 }
            //             })
            //         } else if (res.cancel) {
            //             uni.showToast({
            //                 title: '取消签约',
            //                 icon: 'none'
            //             })
            //         }
            //     }
            // });

            // }



        },
        // 笔迹开始
        uploadScaleStart(e) {
            this.startX = e.changedTouches[0].x
            this.startY = e.changedTouches[0].y
            //设置画笔参数
            //画笔颜色
            this.ctx.setStrokeStyle(this.lineColor)
            //设置线条粗细
            this.ctx.setLineWidth(this.lineSize)
            //设置线条的结束端点样式
            this.ctx.setLineCap("round") //'butt'、'round'、'square'
            //开始画笔
            this.ctx.beginPath()
        },
        // 笔迹移动
        uploadScaleMove(e) {
            //取点
            let temX = e.changedTouches[0].x
            let temY = e.changedTouches[0].y
            //画线条
            this.ctx.moveTo(this.startX, this.startY)
            this.ctx.lineTo(temX, temY)
            this.ctx.stroke()
            this.startX = temX
            this.startY = temY
            this.ctx.draw(true)
        },
        /**
         * 重写
         */
        retDraw() {
            this.ctx.clearRect(0, 0, 700, 730);
            this.ctx.draw();
            //设置canvas背景
            this.setCanvasBg('#fff');
        },
        /**
         * @param {Object} str
         * @param {Object} color
         * 选择颜色
         */
        selectColorEvent(str, color) {
            this.selectColor = str;
            this.lineColor = color;
        },

        //完成
        subCanvas() {
            let that = this;
            uni.showLoading({
                title: '请求中...',
                mask: true
            });
            uni.canvasToTempFilePath({
                canvasId: 'suppWriting',
                fileType: 'png',
                quality: 1, //图片质量
                success(res) {
                    console.log(res.tempFilePath, 'res');
                    // that.filePath = res.tsempFilePath;
                    // console.log(that.info,'info');
                    console.log(that.info.id);

                    that.uploadPromise(res.tempFilePath, that.info.id)
                    that.show = false;
                    uni.hideLoading();
                    return;
                }
            });
        },
        uploadPromise(url, id) {
            let that = this;
            return new Promise((resolve, reject) => {
                console.log(this.info.id);

                let a = uni.uploadFile({
                    url: `${this.base}/farm/acceptSignContract`, // 仅为示例，非真实的接口地址
                    filePath: url,
                    name: 'file',
                    formData: {
                        'id': `${id}`
                    },
                    header: {
                        Authorization: uni.getStorageSync('token')
                    },
                    success: (res) => {
                        let data = JSON.parse(res.data);
                        console.log(data, 'data');
                        if (data.code == 200) {
                            uni.showToast({
                                title: '签约成功',
                                icon: 'success'
                            })
                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: 1
                                });
                                that.filePath = '';
                                that.retDraw();
                            }, 1000)
                        } else {
                            uni.showToast({
                                title: '失败',
                                icon: 'none'
                            })
                        }
                        // customerSign
                    }
                });
            })
        },
        //设置canvas背景色  不设置  导出的canvas的背景为透明
        //@params：字符串  color
        setCanvasBg(color) {

            /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
            //rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
            //这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
            this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
            // ctx.setFillStyle('red')
            this.ctx.setFillStyle(color);
            this.ctx.fill(); //设置填充
            this.ctx.draw(); //开画
        },
        //删除合同
        dels(){
            let t = this;
            uni.showModal({
                title: '提示',
                content: '确认删除当前合同？',
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        delCon(t.info.id).then(res=>{
                            // console.log(res.data,'res.data');
                            if(res.data.code==200){
                                uni.showToast({
                                    title:res.data.msg,
                                    icon:'none'
                                })
                                setTimeout(()=>{
                                    uni.navigateBack({delta:2})
                                },1000)
                            }
                        })
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        }
    },
    onLoad(option) {
        console.log(option.id);
        getSignContent(option.id).then(res => {
            console.log(res.data, 'res.data');
            if (res.data.code == 200) {
                this.info = res.data.data.contract;
                this.contractDetailList = res.data.data.contractDetailList;
            }
        });

    },
    onShow() {
        //    uni.removeStorageSync('storage_key');
        this.flagNum = uni.getStorageSync('storage_key');
        console.log(this.flagNum, 'flagNum');
        this.base = this.request.config.baseURL
    }
}
</script>
<style lang="scss">
.card {
    width: 90%;
    margin-left: 5%;
    background: #ffffff;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;

    .inCard {
        width: 90%;
        margin-left: 5%;
    }
}

.container {
    background: #f3f3f3;
    height: 100vh;
    overflow-y: scroll;
    color: #000000;
}

.form-flex {
    display: flex;
    align-items: center;
    width: 100%;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title {
    font-weight: 500;
    width: 30%;
}

.sign {
    background: #000000;
    color: #fff;
    width: 90%;
    margin-left: 5%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
}
.signs {
    background: red;
    color: #fff;
    width: 90%;
    margin-left: 5%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
}

.wrapper {
    width: 100%;
    height: 100%;
    margin: 30rpx 0;
    overflow: hidden;
    display: flex;
    align-content: center;
    /* flex-direction: row; */
    justify-content: center;
    font-size: 28rpx;
}

.suppWriting {
    background: #fff;
    width: 100%;
    height: 90%;
}

.handRight {
    /* 	display: inline-flex;
		align-items: center;
		justify-content: space-between; */
    position: relative;
}

.handCenter {
    /* border: 4rpx dashed #e9e9e9; */
    flex: 5;
    overflow: hidden;
    box-sizing: border-box;
}

.handTitle {
    transform: rotate(90deg);
    flex: 1;
    color: #3C3F45;
    margin-top: 20px;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
}

.handBtn button {
    font-size: 28rpx;
}

.handBtn {
    position: absolute;
    bottom: 20px;
}

.delBtnIcon {
    transform: rotate(90deg);
    color: #F11515;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    margin-right: 3px;
    margin-bottom: 1px;
}

.delBtn {
    margin-bottom: 45px;
    transform: rotate(90deg);
    color: #F11515;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
}

.subBtn {
    transform: rotate(90deg);
    color: #fff;
    margin-bottom: 30rpx;
    text-align: center;
    justify-content: center;
    border-radius: 200px;
    background: #0054A3;

}

/*Peach - 新增 - 保存*/






.warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.rect {
    width: 90vw;
    height: 90vh;
    background-color: #fff;
}
</style>